import React, { useEffect, useState } from "react";
import {
  SettingOutlined,
  UserOutlined,
  UsergroupDeleteOutlined,
  OrderedListOutlined,
  ApartmentOutlined,
  ContactsOutlined,
  FileSearchOutlined,
  ReadOutlined,
  EllipsisOutlined,
  FormOutlined,
  SnippetsOutlined,
  FundOutlined,
  AppstoreOutlined,
  HomeOutlined,
  LaptopOutlined,
  ShoppingCartOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import type { ColumnsType } from "antd/es/table";
import { Layout, Menu, theme, Space, Table, Tag } from "antd";
import axios from "axios";
import { ListRawState,DataType } from "./types";
const { Header, Content, Sider } = Layout;
type MenuItem = Required<MenuProps>["items"][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}
const items: MenuItem[] = [
  getItem("系统管理", "1", <SettingOutlined />, [
    getItem("用户管理", "1", <UserOutlined />),
    getItem("角色管理", "2", <UsergroupDeleteOutlined />),
    getItem("菜单管理", "3", <OrderedListOutlined />),
    getItem("部门管理", "4", <ApartmentOutlined />),
    getItem("岗位管理", "5", <ContactsOutlined />),
    getItem("字典管理", "6", <FileSearchOutlined />),
    getItem("参数设置", "7", <ReadOutlined />),
    getItem("通知公告", "8", <EllipsisOutlined />),
    getItem("日志管理", "9", <FormOutlined />),
  ]),
  getItem("一件事管理", "10", <SnippetsOutlined />),
  getItem("系统监控", "11", <FundOutlined />, [
    getItem("系统监控1", "12", <FundOutlined />),
    getItem("系统监控2", "13", <FundOutlined />),
    getItem("系统监控3", "14", <FundOutlined />),
  ]),
  getItem("系统工具", "15", <AppstoreOutlined />, [
    getItem("系统工具1", "16", <AppstoreOutlined />),
    getItem("系统工具2", "17", <AppstoreOutlined />),
  ]),
];
const itemsList: MenuItem[] = [
  getItem("首页", "1", <HomeOutlined />),
  getItem("门户管理", "2", <SettingOutlined />),
  getItem("流程平台", "3", <LaptopOutlined />),
  getItem("无码销售管理", "4", <ShoppingCartOutlined />),
];
const App: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
const [list,setList]=useState<ListRawState[]>([])
const fetchList=async()=>{
  const resp = await axios.get("/api/list");
  setList(resp.data.list)
}
const columns: ColumnsType<DataType> = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: text => <a>{text}</a>,
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: (_, { tags }) => (
      <>
        {tags.map(tag => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: "Action",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];
const data: DataType[] = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sydney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: "4",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "5",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "6",
    name: "Joe Black",
    age: 32,
    address: "Sydney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: "7",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "8",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "9",
    name: "Joe Black",
    age: 32,
    address: "Sydney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: "10",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "11",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "12",
    name: "Joe Black",
    age: 32,
    address: "Sydney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];
useEffect(()=>{
fetchList()
},[])
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider>
        <div
          style={{
            height: 32,
            margin: 16,
            textAlign: "center",
            lineHeight: 2,
            color: "#fff",
            fontWeight: "bolder",
            fontStyle: "italic",
            background: "rgba(255, 255, 255, 0.2)",
          }}
        >
          简搭云管理系统
        </div>
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
        />
      </Sider>
      <Layout className="site-layout">
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Menu
            theme="dark"
            defaultSelectedKeys={["2"]}
            mode="horizontal"
            items={itemsList}
          ></Menu>
        </Header>
        <Content style={{ margin: "0 16px" }}>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
            }}
          >
            <Table columns={columns} dataSource={data} />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;
